/**
 * 学习目标： React 组件 - 函数组件
 * 
    1. 为了区分普通标签，React 函数组件的名称必须 `大写字母开头`
    2. 函数组件`必须有返回值`，表示该组件的结构
    3. 如果组件不渲染任何内容，可以返回 null

  补充：React 组件和 Vue 组件对比
    Vue定义组件：1. 创建 vue 单文件, 2. 引入，3 注册 4. 使用（需要新建一个vue文件定义组件）
    React定义组件：1.定义一个大写字母开头的函数，函数内部返回组件结构  2. 使用 (抽离组件也只是抽离函数而已)

 */

import React from 'react'
import ReactDOM from 'react-dom'
import MyHeader from './components/MyHeader'

// 🔔 也可以把函数组件抽离出去用一个独立的js文件维护
// function MyHeader() {
//   return (
//     <header>
//       <h1>页面头部组件</h1>
//     </header>
//   )
// }

function MyFooter() {
  return (
    <footer>
      <h3>页面底部组件</h3>
    </footer>
  )
}

const App = () => (
  <>
    <MyHeader />
    <MyHeader />
    <MyHeader />
    <MyHeader />
    <div>内容主体</div>
    <MyFooter />
    <MyFooter />
    <MyFooter />
  </>
)

ReactDOM.render(<App />, document.getElementById('root'))
